import React from 'react';
import { FieldProps } from '@rjsf/utils';
import { Button, Flex, Popover } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import styles from './styles.module.scss';
// 选择器
export const ButtonArrField = ({
  uiSchema,
  schema,
  onChange,
  disabled,
}: FieldProps<string>) => {
  const position = uiSchema['ui:position'] ?? 'flex-end';
  const layout = uiSchema['ui:layout'] ?? [1, 1];
  const options = uiSchema['ui:options']?.options as Array<any>;
  const label = uiSchema?.['ui:options']?.label ?? true;
  const [open, setOpen] = React.useState(false);
  const [current, setCurrent] = React.useState<{
    title: string;
    const: string;
  }>(
    options?.find((item) =>
      schema?.default ? item.const === schema?.default : true,
    ),
  );
  return (
    <Flex
      style={{ gap: 4, justifyContent: position }}
      className='items-center'>
      <span style={{ flex: layout[0] }}>{label ? schema.title : ''}</span>
      <Popover
        rootClassName='_custom-dropdown-cont-p-6'
        title=''
        placement='bottomLeft'
        disabled={disabled}
        open={open}
        arrow={false}
        content={
          <>
            {options?.map((item) => (
              <div
                className={styles.listItem}
                onClick={() => {
                  setOpen(false);
                  setCurrent(item);
                }}>
                {item.title}
              </div>
            ))}
          </>
        }
        onOpenChange={(value) => {
          !value && setOpen(value);
        }}
        trigger='click'>
        <Flex style={{ width: 0, flex: layout[1], overflow: 'hidden' }}>
          <Button
            disabled={disabled}
            className={`${styles.btn} ${styles.btnArr}`}
            onClick={() => onChange(current.const)}>
            {current?.title}
          </Button>
          <div
            className={`${styles.btn} ${styles.btnArrIcon}`}
            onClick={() => setOpen(!open)}>
            <DownOutlined />
          </div>
        </Flex>
      </Popover>
    </Flex>
  );
};
